<template>
    <el-dialog v-model="model" draggable :close-on-click-modal="false" :show-close="false" width="500px"
        :append-to-body="appendToBody">
        <template #header>
            <el-text style="color: #fff">
                <el-icon> <ele-Edit /> </el-icon>
                {{ props.title }}
            </el-text>
        </template>
        <div style="padding-bottom:10px">
            <el-switch v-model="isEdit" class="mb-2" :disabled="isEdit" active-text="编辑" inactive-text="查看"
                v-if="canEdit" />
        </div>
        <slot></slot>
        <template #footer>
            <slot name="footer">
                <el-popconfirm width="220" v-if="isEdit" title="未保存, 要关闭吗？" placement="left-end" @confirm="close">
                    <template #reference>
                        <el-button>
                            取 消
                        </el-button>
                    </template>
                </el-popconfirm>
                <el-button @click="submit" type="primary">
                    {{ submitTitle }}
                </el-button>
            </slot>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
// 编辑对话框
// 用法: 只能用ref, 不能用v-model属性控制显示与关闭
// <MkDialogEdit ref="dialogRef" @submit="submit" v-model:isEdit="isEdit"> </MkDialogEdit>
// const dialogRef = ref();
// dialogRef.value.show();
// dialogRef.value.close();
defineOptions({
    name: 'MkDialogEdit'
})
// props
const props = defineProps({
    title: {
        type: String,
        default: '详 情'
    },
    appendToBody: {
        type: Boolean,
        default: false
    },
    canEdit: { // 为false时不能编辑,也不能修改编辑状态
        type: Boolean,
        default: true
    }
})

const isEdit = defineModel('isEdit', { default: true })
const model = defineModel()
// 定义回调函数
let emits = defineEmits(['submit'])

const submitTitle = computed(() => {
    return isEdit.value ? '提交' : '关闭'
})

// 确定事件
const submit = () => {
    if (isEdit.value) {
        emits('submit')
    } else {
        model.value = false;
    }
}

const show = () => {
    model.value = true
}

//父组件主动关闭, 确认关闭
const close = () => {
    // isEdit.value = false
    model.value = false;
}

defineExpose({ show, close })
</script>
